<script setup lang="ts">
import type { ConsultOrderItem } from '@/types/consult';
import ConsultItem from './ConsultItem.vue'
import { onMounted, ref} from 'vue'
import type { ConsultType } from '@/types/enum';
import { getConsultOrderList } from '@/api/consult';
// 接收获取订单的类型
const props = defineProps<{
  type:ConsultType
}>()
// 1.列表数据
const list = ref<ConsultOrderItem[]>([]);
// 定义获取订单列表参数
const params = {
  type:props.type,
  current:1,
  pageSize:10
}
// 2.列表加载状态
const loading = ref(false);
// 3.列表是否加载完成状态
const finished = ref(false);
// 4.加载数据的方法
/**
 * 1.默认页面加载会执行一次(与数据情况,不够一屏，会再次加载)
 * 2.用户每次滚动到上次数据的底部,会再次执行
 */
const onLoad = async () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  loading.value = true;
  const res = await getConsultOrderList(params)
  // 追加数据
  const { data} = res
  console.log(res);
  list.value = list.value.concat(data.rows);
  // 关闭loading
  loading.value = false;
  // 判断是否加载完成
  if (list.value.length >= data.total) {
    finished.value = true;
  }else{
    params.current++
  }
};
onMounted(()=>{
  // 加载数据
  onLoad()
})
// 删除订单
const onDelete = (id:string) => {
  list.value = list.value.filter(item => item.id !== id)
  if (!list.value.length) onLoad()
}
</script>

<template>  
  <div class="consult-list">
    <!--订单列表:循环渲染问诊订单数据-->
    <van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <consult-item v-for="(item,i) in list" :key ="i" :item="item" @on-delete="onDelete"/>
</van-list>

  </div>
</template>

<style lang="scss" scoped>
.consult-list {
  padding: 10px 15px;
}
</style>
